<template>
	<view>
		<navbar :parameter='parameter'></navbar>
		<view class="box form">
			<view class="line acea-row row-between-wrapper">
				<view class="tit"> 昵称 </view>
				<input type="nickname" v-model="userInfo.nickname" placeholder="请输入昵称" placeholder-class="psc">
			</view>
			<view class="line acea-row row-between-wrapper">
				<view class="tit"> 头像 </view>
				<button class="avatar " open-type="chooseAvatar" @chooseavatar='chooseavatar'>
					<image :src='userInfo.avatar'></image>
				</button>
			</view>
			<view class="line acea-row row-between-wrapper" v-if="userInfo.isUser">
				<view class="tit"> 年龄 </view>
				<input type="num" v-model="userInfo.age" placeholder="请输入您的年龄" placeholder-class="psc">
			</view>
			<view class="line acea-row row-between-wrapper" v-if="userInfo.isUser">
				<view class="tit"> 性别 </view>
				<u-radio-group placement="row" @change="gender_change" activeColor="#347DFE" v-model="gender">
					<u-radio :customStyle="{marginLeft: '8px'}" v-for="(item, index) in gender_list" :key="index"
						:label="item.value" :name="item.name" labelSize="14" labelColor="#000">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="line acea-row row-between-wrapper" v-if="userInfo.isUser">
				<view class="tit"> 城市 </view>
				<input type="number" v-model="city" placeholder="请选择城市" placeholder-class="psc" disabled
					@click="city_show = true">
			</view>
			<view class="btn-box">
				<view class="btn" @click="submit"> 保存</view>
			</view>
		</view>
		<!-- 城市 -->
		<u-picker :show="city_show" ref="uPicker" :columns="columns" keyName="name" @confirm="confirm"
			@change="changeHandler">
		</u-picker>

		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '个人信息设置',
					'color': false,
				},
				userInfo: {},
				avatar: '',
				city: '',
				city_show: false,
				columns: [
					[],
					[]
				],
				gender_list: [{
					name: '1',
					value: '男',
				}, {
					name: '2',
					value: '女',
				}],
				gender: ''
			};
		},
		onLoad(option) {
			console.log(option);
			var a = this.isBlank(option.nickname)
			if (!a) {
				console.log(111);
				this.userInfo = option
			} else {
				this.userInfo = {}
			}
			// 获取省
			this.getProvince();
			this.city = option.province + '-' + option.city;
			if (option.gender == '男') {
				this.gender = '1'
			} else if (option.gender == '女') {
				this.gender = '2'
			}
		},
		onShow() {

		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {

		},
		onShareTimeline(res) { //分享到朋友圈

		},
		methods: {
			// 判断是否为空 返回true/false
			isBlank(data) {
				if (
					data == null ||
					data === 'null' ||
					data === '' ||
					data === undefined ||
					data === 'undefined' ||
					data === 'unknown' ||
					data === '[]'
				) {
					return true
				} else {
					return false
				}
			},
			async getProvince() {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/index/getProvince',
				})
				var province_id = res.data.data[0].id;
				this.columns[0] = res.data.data;
				this.getCity(province_id);
				this.columns[1] = this.cityArr;
				console.log(this.columns[1]);
			},
			async getCity(province_id) {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/index/getCity',
					data: {
						province: province_id
					}
				})
				console.log(111111);
				this.columns[1] = res.data.data
			},
			async changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				var v = e.value[0]
				console.log(v)
				const res = await this.$myRequest({
					url: '/api/index/getCity',
					data: {
						province: v.id
					}
				})
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, res.data.data)
				}

			},
			confirm(e) {
				console.log('confirm', e)
				var v = e.value
				this.city_show = false;
				this.userInfo.province = v[0].id;
				this.userInfo.city = v[1].id;
				this.city = v[0].name + '-' + v[1].name;
			},

			// 性别
			gender_change: function(name) {
				console.log('gender', name);
				this.userInfo.gender = name;
			},
			async updateUserInfo() {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/user/updateUserInfo',
					data: {
						openid: uni.getStorageSync('openid'),
						nickname: that.userInfo.nickname,
						gender: that.userInfo.gender,
						province: that.userInfo.province,
						city: that.userInfo.city,
						age: that.userInfo.age,
						avatar: that.avatar,
					}
				})
				if (res.data.status == 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: '保存成功',
						complete() {
							uni.navigateBack()
						}
					})
				}
			},
			async updateStaffInfo() {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/manage/updateStaffInfo',
					data: {
						openid: uni.getStorageSync('openid'),
						staff_name: that.userInfo.nickname,
						head_image: that.avatar,
					}
				})
				if (res.data.status == 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: '保存成功',
						complete() {
							uni.navigateBack()
						}
					})
				}
			},
			// 头像
			chooseavatar(e) {
				const {
					avatarUrl
				} = e.detail
				this.userInfo.avatar = avatarUrl;
				console.log(avatarUrl)
				uni.uploadFile({
					url: 'https://dsby.hearoommed.com/api/uploads/uploadImage', // 仅为示例，非真实的接口地址
					// url: 'http://192.168.0.3:11122/api/uploads/uploadImage', // 仅为示例，非真实的接口地址
					filePath: avatarUrl,
					name: 'image',
					formData: {
						openid: uni.getStorageSync('openid')
					},
					success: (res) => {
						this.avatar = (JSON.parse(res.data).data)
						console.log('11111', this.avatar)
					},
					fail(res) {
						console.log('fail', res)
					}
				});
			},
			submit() {
				console.log(this.userInfo);
				var openid = uni.getStorageSync('openid');
				if (openid) {
					if (this.userInfo.isUser) {
						console.log('user', this.userInfo);
						this.updateUserInfo()
					} else {
						console.log('staff');
						this.updateStaffInfo()
					}
				}else{
					this.$refs.uToast.show({
						type: 'error',
						message: '请先登录',
						complete() {
							uni.navigateBack()
						}
					})
				}
			}


		}
	}
</script>

<style lang="scss" scoped>
	.wap {
		padding: 20rpx;
	}

	.box {
		width: 100%;
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.form .line {
		font-size: 28rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #D9D9DA;

	}

	.form .line:last-of-type {
		border-bottom: none;
	}

	.form .line .tit {
		color: #000;
		width: 200rpx;
	}

	.form .line input {
		color: #000;
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
	}

	.form .line .avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin: 0;
		border: 1px solid #ececec;
	}

	.form .line image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.btn-box {
		padding-top: 60rpx;
	}

	.btn-box .btn {
		width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #347DFE;
		color: #fff;
		font-size: 32rpx;
	}
</style>
